<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: #3e9adf;
            font: 11px sans-serif;
            overflow: hidden;
        }
        p {
            position: relative;
            left: 560px;
            top: 620px;
            line-height: 1.3em;
            color: #fff;
            animation-delay: 3s;
        }
        strong {
            display: block;
            font-size: 13px;
            margin-bottom: 5px;
        }
        a {
            text-decoration: none;
            color: #ddd;
        }
        a:hover {
            color: #efefef;
        }
        img {
            position: absolute;
            z-index: 2;
            transform: translateX(-50%);
        }
        .objects {
            position: relative;
            width: 1000px;
            margin: 0 auto;
        }
        .air-balloon {
            width: 200px;
            height: 200px;
            top: 0px;
            left: 100px;
            animation-delay: 0.2s;
        }
        .shop {
            width: 200px;
            height: 200px;
            top: 24px;
            left: 394px;
            animation-delay: 0.4s;
        }
        .road-large {
            width: 100px;
            height: 100px;
        }
        .road-junction {
            width: 100px;
            height: 100px;
        }
        #road-1 {
            top: 107px;
            left: 453px;
            animation-delay: 0.6s;
        }
        #road-2 {
            top: 149px;
            left: 380px;
            animation-delay: 0.62s;
        }
        #road-3 {
            top: 191px;
            left: 307px;
            animation-delay: 0.64s;
        }
        #road-4 {
            top: 230px;
            left: 240px;
            animation-delay: 0.66s;
        }
        #road-5 {
            top: 270px;
            left: 310px;
            animation-delay: 0.68s;
        }
        #road-6 {
            top: 313px;
            left: 385px;
            animation-delay: 0.69s;
        }
        #road-7 {
            top: 356px;
            left: 460px;
            animation-delay: 0.7s;
        }
        #road-8 {
            top: 399px;
            left: 535px;
            animation-delay: 0.71s;
        }
        #road-9 {
            top: 436px;
            left: 599px;
            animation-delay: 0.72s;
        }
        .tree {
            width: 75px;
            height: 75px;
        }
        #tree-1 {
            top: 150px;
            left: 335px;
            animation-delay: 0.7s;
        }
        #tree-2 {
            top: 130px;
            left: 370px;
            animation-delay: 0.6s;
        }
        #tree-3 {
            top: 400px;
            left: 480px;
            animation-delay: 2s;
        }
        .gas-station {
            width: 200px;
            height: 200px;
            top: 170px;
            left: 304px;
            animation-delay: 1s;
        }
        .luxury-residential {
            width: 150px;
            height: 150px;
            top: 240px;
            left: 200px;
            animation-delay: 1.2s;
        }
        .building {
            width: 150px;
            height: 150px;
            top: 300px;
            left: 380px;
            animation-delay: 1.4s;
        }
        .garage {
            width: 150px;
            height: 150px;
            top: 350px;
            left: 250px;
            animation-delay: 1.6s;
        }
        .condominium {
            width: 200px;
            height: 200px;
            top: 85px;
            left: 450px;
            animation-delay: 1.5s;
        }
        .bowling-alley {
            width: 200px;
            height: 200px;
            top: 216px;
            left: 387px;
            animation-delay: 1.2s;
        }
        .apartment-building {
            width: 300px;
            height: 300px;
            top: 190px;
            left: 550px;
            animation-delay: 2s;
        }
        .man {
            width: 50px;
            height: 50px;
            top: 395px;
            left: 550px;
            animation-delay: 2.3s;
        }
        .sign {
            width: 20px;
            height: 20px;
            top: 405px;
            left: 550px;
            animation-delay: 2.5s;
        }
        .car {
            width: 30px;
            height: 30px;
            top: 195px;
            left: 400px;
            animation-delay: 0.8s;
        }
        .bus {
            width: 40px;
            height: 40px;
            top: 290px;
            left: 341px;
            animation-delay: 1.3s;
        }
        .ground {
            z-index: 1;
            background: #8da95e;
            width: 580px;
            height: 580px;
            top: 350px;
            left: 500px;
            margin: -120px;
            padding: 48px;
            position: absolute;
            transform: rotateX(48deg) rotateZ(48deg) translateX(-50%);
            transform-style: preserve-3d;
        }
        .dirt {
            background: #a58f7e;
            width: 580px;
            height: 580px;
            top: 350px;
            left: 500px;
            margin: -120px;
            margin-top: -119px;
            padding: 48px;
            position: absolute;
            transform: rotateX(48deg) rotateZ(48deg) translateX(-50%);
            transform-style: preserve-3d;
        }
        .dirt:nth-child(2) {
            margin-top: -118px;
        }
        .dirt:nth-child(3) {
            margin-top: -117px;
        }
        .dirt:nth-child(4) {
            margin-top: -116px;
        }
        .dirt:nth-child(5) {
            margin-top: -115px;
        }
        .dirt:nth-child(6) {
            margin-top: -114px;
        }
        .dirt:nth-child(7) {
            margin-top: -113px;
        }
        .dirt:nth-child(8) {
            margin-top: -112px;
        }
        .dirt:nth-child(9) {
            margin-top: -111px;
        }
        .dirt:nth-child(11) {
            margin-top: -110px;
        }
        .dirt:nth-child(12) {
            margin-top: -109px;
        }
        .dirt:nth-child(13) {
            margin-top: -108px;
        }
        .dirt:nth-child(14) {
            margin-top: -107px;
        }
        .dirt:nth-child(15) {
            margin-top: -106px;
        }
        .dirt:nth-child(16) {
            margin-top: -105px;
        }
        .dirt:nth-child(17) {
            margin-top: -104px;
        }
        .dirt:nth-child(18) {
            margin-top: -103px;
        }
        .dirt:nth-child(19) {
            margin-top: -102px;
        }
        .dirt:nth-child(20) {
            margin-top: -101px;
        }
        .dirt:nth-child(21) {
            margin-top: -100px;
        }
        .dirt:nth-child(22) {
            margin-top: -99px;
        }
        .dirt:nth-child(23) {
            margin-top: -98px;
        }
        .dirt:nth-child(24) {
            margin-top: -97px;
        }
        @media (max-width: 999px) {
            .objects {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<div class="objects">
    <div class="ground"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>
    <div class="dirt"></div>

    <img src="http://danbovey.uk/assets/lab/animated-city-map/air-balloon.svg" class="animated bounceInDown air-balloon">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/shop.svg" class="animated fadeInDown shop">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/tree-1.svg" class="animated fadeInDown tree" id="tree-1">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/tree-1.svg" class="animated fadeInDown tree" id="tree-2">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/road-large-north.svg" class="animated fadeInDown road-large" id="road-1">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/road-large-north.svg" class="animated fadeInDown road-large" id="road-2">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/road-large-north.svg" class="animated fadeInDown road-large" id="road-3">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/road-junction-east.svg" class="animated fadeInDown road-junction" id="road-4">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/road-large-east.svg" class="animated fadeInDown road-large" id="road-5">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/car-red.svg" class="animated fadeInDown car" id="car-1">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/gas-station.svg" class="animated fadeInDown gas-station">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/road-large-east.svg" class="animated fadeInDown road-large" id="road-6">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/road-large-east.svg" class="animated fadeInDown road-large" id="road-7">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/road-large-east.svg" class="animated fadeInDown road-large" id="road-8">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/road-large-east.svg" class="animated fadeInDown road-large" id="road-9">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/luxury-residential.svg" class="animated fadeInDown luxury-residential">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/bowling-alley.svg" class="animated fadeInDown bowling-alley">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/building.svg" class="animated fadeInDown building">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/garage.svg" class="animated fadeInDown garage">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/condominium.svg" class="animated fadeInDown condominium">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/apartment-building.svg" class="animated fadeInDown apartment-building">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/man.svg" class="animated fadeInDown man">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/stop-sign-back.svg" class="animated fadeInDown sign">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/bus.svg" class="animated fadeInDown bus">
    <img src="http://danbovey.uk/assets/lab/animated-city-map/tree-2.svg" class="animated fadeInDown tree" id="tree-3">
    <p class="animated bounceInRight"><strong>Animated City Map</strong>
    </p>
    <p class="animated bounceInRight">by <a href="http://danbovey.uk">Dan Bovey</a>
    </p>
    <p class="animated bounceInRight">Map Assets by <a href="http://isometricmaps.com">isometricmaps.com</a>
    </p>
</div>
</body>
</html>